<script setup lang="ts">
import FontConter from './components/FontConter/index.vue'
import Framing from './components/Framing/index.vue'
import Price from './components/Price/index.vue'
import Publisher from './components/Publisher/index.vue'
import keywordTitle from '~/components/KeywordTitle/index.vue'
import ItemFont from '~/components/ItemFont/index.vue'
import Give from '~/components/Give/index.vue'
import ChangeButton from '~/components/ChangeButton/index.vue'
import APIDetails from '~/api/details'
import { useAuth } from '~/stores/auth/index'
import type { GoodsInfoData, GoodsInfoResult, SimilarResult, SetGoodsLikesResult, SetGoodsCollectionResult, SetGoodsSharesResult } from '~/api/details/types'
import PurchaseFont from './components/PurchaseFont/index.vue'
import Advertising from '~/components/Advertising/index.vue'

defineOptions({
    name: 'FontDetails'
})

definePageMeta({
    showSmallSearchBox: true,
})

const { token } = storeToRefs(useAuth())
const $route = useRoute()
const { isNextOperation } = useAuth()
const loading = shallowRef<boolean>(false)
const goodsInfo = ref<GoodsInfoResult>({})
const consumeLogList = ref<any[]>([])
provide('goodsInfo', goodsInfo)
provide('consumeLogList', consumeLogList)
const shopOtherloading = shallowRef<boolean>(false)


const similarList = ref<SimilarResult[]>([])
function getSimilar() {
    const goodsInfoData: GoodsInfoData = {
        category_type: ($route.query.categoryType as string),
        id: ($route.params.id as string)
    }

    loading.value = true
    APIDetails.getSimilar(goodsInfoData).then(({ data }) => {
        similarList.value = data
    }).finally(() => {
        loading.value = false
    })
}

function setConcern(is_concern: 0 | 1) {
    goodsInfo.value.is_concern = is_concern
}

const shopOtherList = ref<SimilarResult[]>([])

function getShopOther() {
    shopOtherloading.value = true
    const goodsInfoData: GoodsInfoData = {
        category_type: ($route.query.categoryType as string),
        id: ($route.params.id as string)
    }

    APIDetails.getShopOther(goodsInfoData).then(({ data }) => {
        shopOtherList.value = data
    }).finally(() => [
        shopOtherloading.value = false
    ])
}

function setLink(data: SetGoodsLikesResult) {
    goodsInfo.value.is_likes = data.is_likes
    goodsInfo.value.likes = data.likes
}

function setCollections(data: SetGoodsCollectionResult) {
    goodsInfo.value.is_collection = data.is_collection
    goodsInfo.value.collections = data.collections
}

function setShares(data: SetGoodsSharesResult) {
    goodsInfo.value.shares = data.shares
}

const dialogVisible = shallowRef<boolean>(false)

const dialogGiveVisible = shallowRef<boolean>(false)

function handleGiveReward() {
    if (isNextOperation()) {
        dialogGiveVisible.value = true
    }
}

function handleClickPurchase() {
    if (isNextOperation()) {
        dialogVisible.value = true
    }
}

onMounted(() => {
    watch(token, async (newValue) => {
        console.log(12456456)
        const goodsInfoData: GoodsInfoData = {
            category_type: ($route.query.categoryType as string),
            id: ($route.params.id as string)
        }
        if (newValue) {
            const { data } = await APIDetails.getLoginNewGoodsInfo(goodsInfoData)
            goodsInfo.value = data.getGoodsInfo
            similarList.value = data.getSimilar
            shopOtherList.value = data.getShopOther
            consumeLogList.value = data.getConsumeLog
        } else {
            const { data } = await APIDetails.getNewGoodsInfo(goodsInfoData)
            goodsInfo.value = data.getGoodsInfo
            similarList.value = data.getSimilar
            shopOtherList.value = data.getShopOther
            consumeLogList.value = data.getConsumeLog
        }
    }, { immediate: true })
})
</script>

<template>
    <div class="video-details">
        <div class="video-container">
            <div class="left">
                <FontConter @set-link="setLink" @set-collections="setCollections" @set-shares="setShares"
                    @give-reward="handleGiveReward" />
                <Framing />
            </div>
            <div class="right">
                <Price @on-click-purchase="handleClickPurchase" />
                <Publisher @set-concern="setConcern" />
            </div>
        </div>
        <div class="video-content">
            <div class="title">
                <keywordTitle title="相似字体推荐" />
                <ChangeButton @click="getSimilar" />
            </div>
            <div v-loading="loading">
                <el-empty description="暂无内容" v-if="similarList.length == 0" :image-size="82" />
                <ItemFont v-for="item in similarList" :key="item.id" :item="item" />
            </div>
        </div>
        <div class="video-content">
            <div class="title">
                <keywordTitle title="店主其他字体" />
                <ChangeButton @click="getShopOther" />
            </div>
            <div v-loading="shopOtherloading">
                <el-empty description="暂无内容" v-if="shopOtherList.length == 0" :image-size="82" />
                <ItemFont v-for="item in shopOtherList" :key="item.id" :item="item" />
            </div>
        </div>
        <div class="video-content" style="margin-top: 20px">
            <Advertising />
        </div>
        <PurchaseFont v-model="dialogVisible" />
        <Give v-model="dialogGiveVisible" />
    </div>
</template>

<style lang="less" scoped>
.video-details {
    padding-top: 35px;

    .video-content {
        box-sizing: border-box;
        width: 1340px;
        padding: 0 20px;
        margin: 0 auto;

        .content {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px 18px;
            margin-bottom: 20px;
        }

        .title {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 20px;
            border-bottom: 1px solid #BBBBBB;
        }
    }

    .video-container {
        box-sizing: border-box;
        width: 1340px;
        padding: 0 20px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: 0 36px;

        .left {
            width: 880px;
        }

        .right {
            width: 380px;
        }
    }
}
</style>
